<script setup lang='ts'>
import {
  Plus,
  EditPen,
  DeleteFilled,
  Download,
  DArrowRight,
  Key,
  CircleCheck,
} from "@element-plus/icons-vue";
import { Search, Refresh } from "@element-plus/icons-vue";
import { onMounted, ref, reactive } from "vue";
import { dateFormat } from "@/utils/time";
const query1 = ref();
const timeVal = ref();
const DateChange = ref();
const isShowSearch = ref(true);
// 显示/隐藏 搜索
const onShowSearch = () => {
  isShowSearch.value = !isShowSearch.value;
};

// 刷新
const loading = ref(false);
const flush = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};
//
const data = ref([]);
</script>

<template>
  <el-row v-if="isShowSearch" class="head">
    <el-col :span="5">
      <el-form-item label="用户名称">
        <el-input v-model="query1" placeholder="请输入用户名称" /></el-form-item
    ></el-col>
    <el-col :span="5"
      ><el-form-item label="用户名称">
        <el-input
          v-model="query1"
          placeholder="请输入用户名称"
        /> </el-form-item
    ></el-col>
    <el-col :span="5"
      ><el-form-item label="状态">
        <el-select v-model="query1" placeholder="用户状态">
          <el-option label="停用" :value="0" />
          <el-option label="启用" :value="1" />
        </el-select> </el-form-item
    ></el-col>
    <el-col :span="5">
      <el-form-item label="创建时间">
        <div class="block">
          <el-date-picker
            width="240px"
            v-model="timeVal"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="DateChange"
          />
        </div> </el-form-item
    ></el-col>
    <el-col :span="3"
      ><el-form-item label="">
        <el-button type="primary" :icon="Search">搜索</el-button>
        <el-button :icon="Refresh">重置</el-button>
      </el-form-item></el-col
    >
  </el-row>
  <div class="buttonGroup">
    <div>
      <el-button type="primary" :icon="Plus" plain>新增</el-button>
      <el-button type="success" :icon="EditPen" plain>修改</el-button>
      <el-button type="danger" :icon="DeleteFilled">删除</el-button>
      <el-button type="warning" :icon="Download" plain>导出</el-button>
    </div>
    <div>
      <el-tooltip placement="top-end">
        <template #content> {{ isShowSearch ? "隐藏" : "显示" }}搜索</template>
        <el-button @click="onShowSearch" :icon="Search" circle />
      </el-tooltip>
      <el-tooltip placement="top-end">
        <template #content> 刷新</template>
        <el-button @click="flush" :icon="Refresh" circle />
      </el-tooltip>
    </div>
  </div>
  <!-- 表格 -->
  <el-table
    class="mar-top-10"
    v-loading="loading"
    :data="data"
    :header-cell-style="{ background: '#f8f8f9', color: '#606266' }"
    style="width: 100%"
  >
    <el-table-column type="selection" />
    <el-table-column prop="date" label="用户编号">
      <template #default="scope">
        <span>
          {{ scope.$index + 1 }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="userName" label="角色编号" />
    <el-table-column prop="nickName" label="角色名称" />
    <el-table-column prop="department" label="权限字符" />
    <el-table-column prop="mobile" label="显示顺序" width="120" />
    <el-table-column prop="status" label="状态">
      <template #default="scope">
        <el-switch
          v-model="scope.row.status"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column prop="creatTime" label="创建时间">
      <template #default="scope">
        {{ dateFormat(scope.row.creatTime) }}
      </template>
    </el-table-column>
    <el-table-column prop="name" label="操作">
      <template #default="scope">
        <div>
          <el-link type="primary" :icon="EditPen">Edit</el-link>
          <el-link type="primary" :icon="DeleteFilled">删除</el-link>
          <el-dropdown style="margin-top: 5px">
            <span class="el-dropdown-link">
              <el-link type="primary" :icon="DArrowRight">更多</el-link>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Key">重置密码</el-dropdown-item>
                <el-dropdown-item :icon="CircleCheck"
                  >分配角色</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.mar-top-10 {
  margin-top: 10px;
}
.buttonGroup {
  display: flex;
  justify-content: space-between;
}
.head >>> .el-form-item__label {
  font-weight: 800;
}
.head >>> .el-input__wrapper {
  width: 230px;
}
.el-col {
  margin-right: 10px;
}
</style>